<template>
    <view class="page">
        <back :title="'添加地址'" :isBack="true"></back>
        <view class="xiugai_box">
            <view class="dizhi_box">
                <view class="select_adr">选择地址</view>
                <view class="cer_adre_box" @click="selDz">

                    <template v-if="bigHouse && location">
                        <view class="cer_top_txt">{{ location }}</view>
                        <view class="cer_bot_txt">{{ bigHouse }}</view>
                    </template>
                    <template v-else>
                        <view class="selsctadre_box">
                            请选择地址
                        </view>
                    </template>
                </view>
                <view class="right_icon"><u-icon color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                </view>
            </view>
            <view style="width: 628rpx;height: 3rpx;background: rgba(240, 240, 240, 1);margin: auto;"></view>
            <view class="remark_box">
                <view class="zs_remark_box">地址备注</view>
                <input type="text" @blur="remarkBtn" :value="remarkVal" placeholder="请输入详细门牌号">
                <view class="right_icon"></view>
            </view>
            <view style="width: 628rpx;height: 3rpx;background: rgba(240, 240, 240, 1);margin: auto;"></view>
            <view class="remark_box">
                <view class="zs_remark_box">联系人</view>
                <input type="text" :value="linkman" @blur="linkmanBtn" placeholder="请输入联系人">
                <view class="right_icon"></view>
            </view>
            <view style="width: 628rpx;height: 3rpx;background: rgba(240, 240, 240, 1);margin: auto;"></view>
            <view class="remark_box">
                <view class="zs_remark_box">联系电话</view>
                <input type="text" @blur="contactBtn" :value="contactNum" placeholder="请输入联系电话" @input='onInput'>
                <view class="right_icon"></view>
            </view>
            <view style="width: 628rpx;height: 3rpx;background: rgba(240, 240, 240, 1);margin: auto;"></view>

            <view class="shifoumoren_box">
                <view class="yuan_box" @click="defaultBtn">
                    <image v-if="!isdefault" src="https://rubbish.lwjcg.com/static/index/ySel.png" mode="scaleToFill" />
                    <image v-else src="https://rubbish.lwjcg.com/static/index/ty.png" mode="scaleToFill" />
                </view>
                <view class="ti_text_box">设为默认预约地址</view>
            </view>
        </view>

        <view class="save_box" @click="$noMultipleClicks(submit)">保存</view>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
    components: {
        back, empoy
    },
    data() {
        return {
            noClick: true,//防连点
            adressMode: '1',//1是修改2是新增
            remarkVal: '',//地址备注
            linkman: '',//联系人
            contactNum: '',//联系电话
            isdefault: false,//地址是否默认
            location: '',//地址
            lng: '',//经度
            lat: '',//纬度
            bigHouse: '',//大地址
            is_default: 0
        }
    },
    onLoad(options) {
    },
    onShow() {
        console.log(this.$store.state.insterPep)
        this.location = this.$store.state.insterPep.location
        this.lng = this.$store.state.insterPep.lng
        this.lat = this.$store.state.insterPep.lat
        this.bigHouse = this.$store.state.insterPep.bigHouse
    },
    methods: {
        onInput(e) {
            this.contactNum = e.detail.value
        },
        // 协议
        defaultBtn() {
            this.isdefault = !this.isdefault
            if (this.isdefault) {
                this.is_default = 1
            } else {
                this.is_default = 0
            }
            console.log(this.is_default)
        },
        // 备注
        remarkBtn(e) {
            this.remarkVal = e.detail.value
        },
        // 联系人
        linkmanBtn(e) {
            this.linkman = e.detail.value
        },
        // 联系电话
        contactBtn(e) {
            this.contactNum = e.detail.value
        },
        selDz() {
            uni.navigateTo({
                url: '/userPage/adress/modif'
            })
        },
        submit() {
            if (this.location == '' || this.bigHouse == '') {
                uni.showToast({
                    title: '请选择地址',
                    icon: 'none'
                });
            }
            else if (this.remarkVal == '') {
                uni.showToast({
                    title: '请输入地址备注',
                    icon: 'none'
                });
            }
            else if (this.linkman == '') {
                uni.showToast({
                    title: '请输入联系人',
                    icon: 'none'
                });
            } else if (!/^1[3456789]\d{9}$/.test(this.contactNum)) {
                uni.showToast({
                    title: '请输入正确的手机号',
                    icon: 'none'
                });
                return false;
            } else {
                let data = {
                    real_name: this.linkman,//联系人
                    phone: this.contactNum,//联系电话
                    location: this.location,//地址
                    detail: this.remarkVal,//地址备注
                    lng: this.lng,//经度
                    lat: this.lat,//纬度
                    is_default: this.is_default,
                }
                this.$Request.post(this.$api.word.addressAdd, data).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            })
                        }, 500)
                    }
                })
            }

        }

    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(246, 246, 246, 1);

    .xiugai_box {
        width: 704rpx;
        height: 578rpx;
        border-radius: 28rpx;
        background: rgba(255, 255, 255, 1);
        margin: auto;
        margin-bottom: 52rpx;
        margin-top: 20rpx;
        box-sizing: border-box;
        padding-top: 8rpx;
        position: relative;

        .dizhi_box {
            width: 628rpx;
            height: 100rpx;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .select_adr {
                width: 112rpx;

                height: 100rpx;
                font-size: 28rpx;
                font-weight: 700;
                line-height: 100rpx;
                color: rgba(0, 0, 0, 1);

            }

            .cer_adre_box {
                width: 400rpx;
                height: 100rpx;

                .selsctadre_box {
                    width: 100%;
                    height: 100rpx;
                    line-height: 100rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(166, 166, 166, 1);
                }

                .cer_top_txt {
                    width: 100%;
                    height: 60rpx;
                    line-height: 60rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(0, 0, 0, 1);
                }

                .cer_bot_txt {
                    width: 100%;
                    height: 40rpx;
                    line-height: 20rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 22rpx;
                    font-weight: 400;
                    color: rgba(166, 166, 166, 1);
                }
            }

            .right_icon {
                width: 40rpx;
                height: 100rpx;
                line-height: 100rpx;
                text-align: right;

            }
        }

        .remark_box {
            width: 628rpx;
            height: 112rpx;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .zs_remark_box {
                width: 112rpx;
                height: 112rpx;
                line-height: 112rpx;
                font-size: 28rpx;
                font-weight: 700;
                color: rgba(0, 0, 0, 1);
            }

            input {
                height: 72rpx;
                width: 400rpx;
            }

            .right_icon {
                width: 40rpx;
                height: 100rpx;
                line-height: 100rpx;
                text-align: right;

            }
        }

        .shifoumoren_box {
            width: 500rpx;
            height: 80rpx;
            position: absolute;
            bottom: 18rpx;
            right: 40rpx;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .yuan_box {
                width: 32rpx;
                height: 32rpx;

                image {
                    width: 100%;
                    height: 100%;
                }


            }

            .ti_text_box {
                height: 72rpx;
                font-size: 28rpx;
                font-weight: 500;
                line-height: 72rpx;
                color: rgba(0, 0, 0, 1);
                margin-left: 16rpx;

            }
        }
    }

    .save_box {
        width: 652rpx;
        height: 100rpx;
        border-radius: 20rpx;
        background: rgba(26, 194, 121, 1);
        text-align: center;
        line-height: 100rpx;
        margin: auto;
        font-size: 40rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);

    }
}
</style>